<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vue图片顺序变换</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div id="app" class="media-display">
            <button @click="prev" class="button prev">Prev</button>
            <button @click="shuffle" class="button shuffle">Shuffle</button>
            <button @click="next" class="button next">Next</button>

            <transition-group name="flip-list" class="media-gallery">
                <figure
                    class="media-post"
                    v-for="(image,i) in images"
                    :key="image"
                    @click="shift(image)"
                    :style="{ 
                          '--i': i, 
                          '--flip-delay': images.length - i 
                          }"
                >
                    <img :src="image" width="400" height="400" />
                    <figcaption>{{i+1}}</figcaption>
                </figure>
            </transition-group>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
            new Vue({
               
                el: "#app",

                
                data() {
                    return {
                        images: [
                            "./images/1.jpg",
                            "./images/2.jpg",
                            "./images/3.jpg",
                            "./images/4.jpg",
                            "./images/5.jpg",
                            "./images/6.jpg",
                            "./images/7.jpg",
                            "./images/8.jpg",
                            "./images/9.jpg",
                           
                        ],
                    };
                },

             
                methods: {
                
                    prev() {
                        this.images.unshift(this.images.pop());
                    },

                    shuffle() {
                        this.images = this.images
                            .sort(() => 0.5 - Math.random())
                            .sort(() => 0.5 - Math.random());
                    },

                    
                    next() {
                        this.images.push(this.images.shift());
                    },

                    shift(image) {
                        this.images.splice(this.images.indexOf(image), 1);
                        this.images.unshift(image);
                    },
                },
            });
        </script>
    </body>
</html>
